 	import {bootstrap} from './css/bootstrap.css';
    import {css} from './index.css';
    import Vue from './js/vue.js';
    import Img1 from './img/zan1.png';
    import Img2 from './img/zan2.png';
    // require('./css/bootstrap.css');
    // require('./index.css');
    var MyContent = {
        props: ['comments'], 
        template: '#mycontent',
        data() {
            return {
                redata: '' //监视textarea              
            }
        },
        methods: {
            datachange(e){              
                this.redata = e.target.value;
                e.target.value = ''
            },
            deleteitem(index) {//删除整行回复
                this.$parent.deleteList(index);
            },
            deletenew(index,newindex) {//删除当前回复
                this.$parent.deleteNewlist(index,newindex);
            },
            sendnewdata(index){//回复         
                if(!this.redata){
                    alert('输入不能为空');
                    return;
                }
                this.$emit('myevent',this.redata,index);//输入的值;id值
                this.redata = ''
            },
            changeImg(index,e){//改变图片                           
            this.comments[index].img = e.target.src == Img1 ? Img2 : Img1;
            }
        },
    };
    var MyInput = {
        template: '#myinput',
        data() {
            return {
                data: {
                    title: '',
                    time: '',
                    author: '',
                    content: ''
                }
    
            }
        },
        methods: {
            getContent() {//单击提交
                this.$emit('myevent', this.data);
                this.data.title = '',
                    this.data.time = '',
                    this.data.author = '',
                    this.data.content = ''
            }
    
        }
    };
    new Vue({
        el: '#app',
        data: {
            comments:JSON.parse(localStorage.getItem('comments')) ||[
                {//评论列表
                    id: 0,
                    title: 'Vue简介',
                    author: '尤雨溪',
                    time: '2022年4月10日 18:24:31',
                    content: 'Vue.js是一款流行的JavaScript前端框架，是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架',
                    flag: 1,
                    img:Img1,
                    newsnum:0,
                    newcontent:[                     
                    ]
                },
                {
                    id: 1,
                    title: 'Webpack简介',
                    author: 'Tobias Koppers',
                    time: '2021年10月1日 8:24:57',
                    content: 'webpack 是代码编译工具，有入口、出口、loader 和插件',
                    flag: 1,
                    img:Img1,
                    newsnum:0,
                    newcontent:[                      
                    ]
                }             
            ],
            
        },
        methods: {
            getComment(txt) {//发送带主题的讨论
                let len = this.comments.length;
                let datenow = new Date();
                let year = datenow.getFullYear(); //得到整年
                let month = datenow.getMonth() + 1; //获取当前月份(0-11,0代表1月)
                let date = datenow.getDate(); //获取当前日(1-31)
                let time = datenow.toLocaleTimeString('chinese', { hour12: false })
                month = month < 10 ? "0" + month : month;
                date = date < 10 ? "0" + date : date;
    
                this.comments.unshift({
                    id: this.comments[len - 1].id + 1,
                    title: txt.title,
                    author: txt.author,
                    time: year + "年" + month + "月" + date + "日 " + time,
                    content: txt.content,
                    flag: 1,
                    img:Img1,
                    newsnum:0,
                    newcontent:[                      
                    ]
                });
    
            },
            getEvent(text,index){//发送当前主题下的讨论
                
                let datenow = new Date();
                let year = datenow.getFullYear(); //得到整年
                let month = datenow.getMonth() + 1; //获取当前月份(0-11,0代表1月)
                let date = datenow.getDate(); //获取当前日(1-31)
                let time = datenow.toLocaleTimeString('chinese', { hour12: false })
                month = month < 10 ? "0" + month : month;
                date = date < 10 ? "0" + date : date;
    
                let nowtime = '';
                nowtime= year + "年" + month + "月" + date + "日 " + time;
    
                for (let idx = 0; idx < this.comments.length; idx++) {
                    if (idx == index) {      
                        this.comments[idx].newsnum++;              
                        this.comments[idx].newcontent.push({nowtime:nowtime,text:text});
                    }
                }
            },
            deleteList(index) {//删除讨论列表中的对话
                for (let idx = 0; idx < this.comments.length; idx++) {
                    if (idx == index) {
                        this.comments.splice(idx, 1);
                    }
                }
            },
            deleteNewlist(index,newindex) {//删除回复列表中的对话
                for (let idx = 0; idx < this.comments.length; idx++) {
                    if (idx == index) {
                        for (let mynewidx = 0 ;mynewidx < this.comments[idx].newcontent.length;mynewidx++) {
                            if (mynewidx == newindex) {
                                this.comments[idx].newcontent.splice(newindex, 1);
                                this.comments[idx].newsnum--;
                            }
                }
                    }
                    
                }              
            },
            changeTheImg(){//点赞部分
                this.comments.forEach(element => {
                    if(element.img == e.target.src) {
                     element.img = element.img == Img1? Img2 : Img1;
                    }
                 });
            }
        },
        components: {
            MyInput,
            MyContent
        },
        watch:{
            comments:{
                deep:true,
                handler(newvalue){
                    localStorage.setItem('comments',JSON.stringify(newvalue));
                },

            }
        }
    
    
    })
